@use 'sass:map';
@use '../core' as *;

.required {
    color: red;
    font-size: 0.7em;
    vertical-align: text-top;
}

.apiReferenceOuter {
    container-type: inline-size;
    width: 100%;

    + .apiReferenceOuter {
        margin-top: -1px;
    }

    > a[id] {
        scroll-margin-top: var(--anchor-offset, 0);
    }

    :global(.tabs-content) & table {
        margin-bottom: -$spacing-size-2;
        border-bottom: none;
    }

    :global(.docPage) & {
        margin-bottom: $spacing-size-4;
    }
}

.propertyDescription {
    margin-top: -$spacing-size-2;
    margin-bottom: $spacing-size-6;
    color: var(--color-fg-secondary);
}

.apiReference {
    display: table; // remove after table > div refactor
    position: relative;
    table-layout: fixed;
    width: 100%;

    @container (max-width: #{$breakpoint-table-small}) {
        display: block;
    }

    @container (min-width: #{$breakpoint-table-small}) {
        height: 1px; // needed for divs to fit table cell heights correctly
    }

    tbody {
        @container (max-width: #{$breakpoint-table-small}) {
            display: block;
        }
    }

    tr {
        @container (max-width: #{$breakpoint-table-small}) {
            display: flex;
            flex-direction: column;
        }
    }

    pre:global(.code) {
        margin-top: $spacing-size-4;
        margin-bottom: $spacing-size-2;
    }

    .linkIcon {
        font-size: var(--text-fs-lg);
    }
}

.propertyRow {
    display: flex;
    flex-wrap: wrap;
    scroll-margin-top: var(--anchor-offset, 0);

    &:where(:not(:first-child)) {
        border-top: 1px solid var(--color-border-secondary);
    }

    &:hover .linkIcon {
        opacity: 0.5;
    }

    @container (max-width: #{$breakpoint-table-small}) {
        display: block;
        width: 100%;
        padding-top: $spacing-size-2;
        padding-bottom: $spacing-size-2;
    }

    #{$selector-darkmode} & {
        border-top-color: var(--color-util-gray-400);
    }
}

.leftColumn {
    flex-shrink: 0;
    width: 40%;
    padding: $spacing-size-2 $spacing-size-4 $spacing-size-2 calc(var(--nested-path-depth, 0) * $spacing-size-2);

    @container (max-width: #{$breakpoint-table-small}) {
        width: 100%;
        padding-right: 0;
    }
}

.rightColumn {
    width: 60%;
    padding: $spacing-size-2 0 $spacing-size-2 $spacing-size-4;

    &:not(td) {
        display: flex;
        flex-direction: column;
    }

    @container (max-width: #{$breakpoint-table-small}) {
        width: 100%;
        padding-left: calc(var(--nested-path-depth, 0) * $spacing-size-2);
    }
}

.name {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --parent-properties-color: var(--color-fg-secondary);
    --parent-properties-font-weight: var(--text-regular);

    position: relative;
    display: inline-block;
    margin-top: $spacing-size-1;
    padding-right: $spacing-size-6;
    font-family: var(--text-monospace-font-family);
    font-size: var(--text-fs-lg);
    font-weight: var(--text-bold);
    margin-bottom: $spacing-size-2;

    @container (min-width: #{$breakpoint-table-small}) {
        font-size: var(--text-fs-base);
    }

    :hover .linkIcon {
        opacity: 0.5;
    }

    .linkIcon {
        position: absolute;
        bottom: -0.125em;
    }
}

.parentProperties {
    font-weight: var(--parent-properties-font-weight);
    color: var(--parent-properties-color);
    line-break: anywhere;
}

.metaList {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-size-2 $spacing-size-6;

    h1 + & {
        margin-top: 16px;
    }
}

.metaItem {
    display: flex;
    flex-direction: column;
}

.metaLabel {
    font-size: var(--text-fs-xs);
    color: var(--color-fg-secondary);
}

.metaValue {
    font-size: var(--text-fs-sm);
    font-family: var(--text-monospace-font-family);
    color: var(--color-fg-code);
}

a.metaValue {
    color: var(--color-link);

    &:hover {
        color: var(--color-link-hover);
    }
}

.description {
    padding-top: $spacing-size-1;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-size-4 $spacing-size-8;
    margin-top: auto;
    padding-top: $spacing-size-2;

    pre {
        min-width: 100%;
    }
}

button.seeMore {
    min-width: 10.5ch;
    color: var(--color-link);
    transition: color $transition-default-timing;

    &:hover {
        color: var(--color-link-hover);

        svg {
            fill: var(--color-link-hover);
        }
    }

    svg {
        --icon-size: 1em;

        margin: -0.1em 0 0;
        fill: var(--color-link);
        transition: fill $transition-default-timing;
    }
}

.highlightAnimate {
    animation: highlight-animation 3000ms ease-out;

    #{$selector-darkmode} & {
        animation: highlight-animation-dark 3000ms ease-out;
    }
}

@keyframes highlight-animation {
    0%,
    100% {
        background-color: transparent;
    }

    10%,
    50% {
        background-color: var(--color-util-brand-100);
    }
}

@keyframes highlight-animation-dark {
    0%,
    100% {
        background-color: transparent;
    }

    10%,
    50% {
        background-color: rgba(255, 255, 255, 0.075);
    }
}

.isChildProp {
    border-top: 1px dashed var(--color-util-gray-200);

    .name {
        font-size: calc(var(--text-fs-base) * 0.92);
    }

    .description p,
    .description ul,
    .actions button {
        font-size: calc(var(--text-fs-base) * 0.9);
    }

    .description code {
        font-size: calc(var(--text-fs-base) * 0.8125);
    }

    .metaValue {
        font-size: calc(var(--text-fs-sm) * 0.92);
    }
}

@container (max-width: #{$breakpoint-table-small}) {
    .level-1 .rightColumn {
        padding-left: $spacing-size-2;
    }

    .level-2 .rightColumn {
        padding-left: $spacing-size-4;
    }

    .level-3 .rightColumn {
        padding-left: $spacing-size-6;
    }
}

.expandedContent {
    border-top: none;
}

.expandedContent > td {
    padding: 0 0 $spacing-size-4;
}
